<template>
  <div id="hotTopicTop">
    <h1 class="con-right-title">
      热门话题推荐
    </h1>

    <div class="search-box">
      <el-form ref="ruleForm" :inline="true" :model="formInline" :rules="rules" class="demo-form-inline">
        
        <el-form-item label="频道" prop="channel">
          <el-select v-model="formInline.channel" placeholder="请选择状态" style="width: 150px;" clearable>
            <el-option v-for="item in channelList" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="话题状态" prop="enabled">
          <el-select v-model="formInline.enabled" placeholder="请选择状态" style="width: 150px;" clearable>
            <el-option v-for="item in enabledList" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="话题名称" prop="topicName">
          <el-input v-model="formInline.topicName" placeholder="请输入关键词搜索" clearable></el-input>
        </el-form-item>

        <el-form-item label="所属圈子" prop="belong">
          <el-select v-model="formInline.circleIds" placeholder="请选择状态" style="width: 150px;" clearable>
            <el-option v-for="item in belongList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="话题创建时间">
          <el-date-picker
            v-model="formInline.createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item class="s-btn">
          <el-button type="success" icon="el-icon-search" @click="toSearch('ruleForm')">
            查询
          </el-button>
          <el-button type="success" plain @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getCirclesOptions } from '@/api/circle/circleManage' // 接口
export default {
  name: 'hotTopicTop',
  msg: '标签管理-顶部搜索',
  props: {
    formInline: {
      type: Object,
      default: function() {
        return {
          channel: '', // 频道
          enabled: '', // 话题状态
          topicName: '', // 话题名称
          circleIds: '', // 所属圈子
          recommendStartDate: '', // 开始时间
          recommendEndDate: '', // 结束时间
          createTime: []
        }
      }
    }
  },
  data() {
    return {
      channelList: [
        { dictLabel: '全部', dictValue: '' }
      ],
      enabledList: [
        { dictLabel: '全部', dictValue: '' }
      ],
      belongList: [
        { name: '全部', id: '' }
      ],
      rules: {
        channel: {},
        enabled: {},
        topicName: {},
        belong: {}
      }
    }
  },
  watch: {
    'formInline.createTime': {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 1) {
          this.formInline.recommendStartDate = newVal[0]
          this.formInline.recommendEndDate = newVal[1]
        } else {
          this.formInline.recommendStartDate = ''
          this.formInline.recommendEndDate = ''
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getattributeList()
  },
  methods: {
    /* 搜索 */
    toSearch(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('toSearch')
        } else {
          return false
        }
      })
    },
    /* 获取数据状态 */
    async getattributeList() {
      // 频道
      let data = await sysNormalDisable('sys_topic_channel', 'topicChannel')
      this.channelList = this.channelList.concat(data)
      // 话题状态
      let data2 = await sysNormalDisable('sys_labels_statu')
      this.enabledList = this.enabledList.concat(data2)
      // 所属圈子
      await getCirclesOptions((res) => {
        this.belongList = this.belongList.concat(res)
      })
      
      //设置默认数据
      this.setDefaultValue()
      //触发获取列表
      this.$emit('toSearch')
    },
    /*设置默认数据*/
    setDefaultValue() {
      this.formInline.channel = this.channelList[0].dictValue
    },
    /* 重置 */
    reset() {
      this.$refs['ruleForm'].resetFields()
      //设置默认数据
      this.setDefaultValue()
    }
  }
}
</script>

<style lang="less">
#hotTopicTop {
  .el-input.el-input--suffix {
    .el-input__inner {
      padding-right: 25px !important;
    }
  }
}
</style>
